<template>
  <div class="good-box">
    <div class="selection"><h3>商品精选</h3></div>

    <div class="good-list-box">
      <van-list
        v-model:loading="loading"
        :finished="finished"
        v-model:error="error"
        error-text="服务器累了，点击重新加载"
        finished-text="没有更多了"
        offset="500"
        @load="onLoad"
        :key="2"
      >
        <water-fall :goods="goods" :banner="[]" ref="waterfalls">
          <template v-slot="slotProps">
            <!-- <a class="good-card" :href="'http://www.higuang365.com/wap/product-'+value.F_ProductId+'.html'+($store.state.userInfo.F_Question?'?parents_id='+$store.state.userInfo.F_Question:'')"> -->
            <div
              class="good-card"
              @click="
                $router.push({
                  path: '/product',
                  query: {
                    id: slotProps.value.F_ProductId,
                    parents_id: username,
                  },
                })
              "
            >
              <van-image
                class="product-img lazy-img"
                lazy-load
                :src="'http://higuang365.com/' + slotProps.value.F_pic_url"
              />
              <div class="good-desc">
                <div class="county">
                  <img
                    class="county-icon"
                    v-if="slotProps.value.F_yuliu2"
                    :src="'http://higuang365.com/' + slotProps.value.F_yuliu2"
                    alt=""
                  />

                  <div class="county-title">
                    {{ slotProps.value.F_BrandCountrie }}
                  </div>
                </div>

                <div class="title">{{ slotProps.value.F_Name }}</div>
                <span class="price"
                  >¥ <span>{{ slotProps.value.F_BdPrice }}</span></span
                >
                <span class="estimate">￥{{ slotProps.value.F_Price }}</span>
                <span
                  class="share"
                  @click.stop="
                    addGoodsCart(
                      slotProps.value.F_yuliu3,
                      slotProps.value.F_ProductId
                    )
                  "
                >
                  <i class="iconfont icon-gouwuche1"></i>
                </span>
              </div>
            </div>
          </template>
        </water-fall>
      </van-list>
    </div>
  </div>
</template>
<script>
import { toRefs, reactive, nextTick } from "vue";
import {  GetDSGoodsList } from "@/api/home";
import { getCookie, addGoodsCart } from "@/lib/ecapi";
import waterfall from "@/components/lib/waterfall.vue";
export default {
  components: {
    "water-fall": waterfall,
  },
  setup() {
    const data = reactive({
      goods: [],
      products: {
        ques: "", //搜索关键字（商品编码，条码，商品名）
        pageNum: 1, //页码
        pageSize: 20, //每页显示条目数
        Strclass: "", //分类ID
        Strlv: getCookie("MLV"), //等级ID（1会员，13plus，18店主） 不传默认1
      },
      error: false,
      loading: false,
      finished: false,
      Refresh: false,
      showherf: false,
      username: getCookie("S[MEMBER]"),
      active: 0,
      waterfalls: null,

    });
    //加载
    const onLoad = async () => {
      const res = await GetDSGoodsList(data.products);

      // data.finished = true;
      if (!res[0]) {
        data.error = true;
        data.loading = false;
        return;
      }
      data.goods.push(...res[1]);

      nextTick(() => {
        data.waterfalls.getHeight();
        data.loading = false;
        data.products.pageNum = data.products.pageNum + 1;
        if (res[1].length < data.products.pageSize) {
          if (!data.products.Strclass) {
            data.products.pageNum = 1;
            return;
          }
          data.finished = true;
        }
      });
    };
    //点击分类获取商品
    const categoryGoods = async () => {
      data.finished = false;
      data.products.Strclass = data.category[data.active].cat_id;
      data.products.pageNum = 1;
      data.goods = [];
      data.waterfalls.resize();
      document.getElementById("app").scrollTop = scrollGoods + 1;
      document.getElementById("app").scrollTop = scrollGoods - 1;
    };
    let scrollGoods = 0;
    //记录分类位置
    const change = () => {
      scrollGoods = document.getElementById("app").scrollTop;
    };
    //下拉刷新
    const refresh = async () => {
      data.products.pageNum = 1;
      data.finished = false;
      data.goods = [];
      data.Refresh = false;
      onLoad();
    };

    return {
      ...toRefs(data),
      onLoad,
      refresh,
      addGoodsCart,
      categoryGoods,
      change,
    };
  },
};
</script>

<style lang="scss" scoped>
@import "@/common/style/mixin";
.good-box {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 6rem;
  .good-list-box {
    min-height: 100vh;
  }
  .good-list {
    width: calc(100vw - 1rem);
    margin: auto;
  }
  .promotional {
    display: flex;
    width: calc(50% - 1rem);
    flex-direction: column;
    margin-left: 1rem;
    .promotion-item {
      flex: 1;
      img {
        width: 100%;
      }
    }
  }


  .good-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
    width: calc(100% - 1rem);
    margin: 0 0.5rem;
    background: #fff;
    border-radius: 1rem;
    overflow: hidden;
  }
  .product-img {
    display: block;
    width: 100%;
    height: calc(50vw - 2rem);
    margin: 0 auto;
  }
  .good-desc {
    text-align: left;
    font-size: 1.2rem;
    padding: 1rem 1rem 0;
    position: relative;
    .county {
      display: flex;
      .county-icon {
        width: 2rem;
        height: 1.3rem;
      }
      .county-title {
        color: #999;
        margin-left: 0.5rem;
      }
    }

    .title {
      font-size: 1.3rem;
      // height: 3.2rem;
      line-height: 2rem;
      letter-spacing: 0.5px;
      margin-top: 2px;
      color: #222333;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .price {
      font-size: 1.3rem;
      color: #ff0036;
      font-weight: bold;
      line-height: 4rem;
      span {
        font-size: 1.7rem;
      }
    }
    .share {
      color: #3c8a58;
      position: absolute;
      right: 1rem;
      bottom: 1rem;
      z-index: 10;
      i {
        font-size: 2rem;
      }
    }
    .estimate {
      color: #c5c5c5;
      text-decoration: line-through;
      margin-left: 0.5rem;
    }
  }
}
.my-swipe {
  height: calc(50vw - 2rem);
}
.activity-card {
  position: relative;
}
.card-image {
  width: 100%;
  height: auto;
  position: absolute;
  left: 0vw;
  top: 0vw;
}
.card-header {
  display: flex;
  flex-direction: row;
  place-content: flex-start space-between;
  flex-shrink: 0;
  position: relative;
  margin-top: 2.4vw;
  align-items: center;
  padding-left: 2.1333vw;
  padding-right: 2.1333vw;
}
.card-title {
  font-size: 4.2667vw;
  white-space: pre-wrap;
  font-weight: bold;
  text-align: left;
  color: #fff;
}
.card-subtitle {
  display: flex;
  flex-direction: row;
  align-content: flex-start;
  flex-shrink: 0;
  align-items: center;
  font-size: 3.2vw;
  color: white;
}
.card-right {
  border-width: 0vw 0.2667vw 0.2667vw 0vw;
  border-style: solid;
  border-color: rgb(255, 255, 255);
  border-image: initial;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-content: flex-start;
  flex-shrink: 0;
  width: 1.8667vw;
  height: 1.8667vw;
  transform: rotate(-45deg);
}
.card-content {
  display: flex;
  flex-direction: row;
  place-content: flex-start space-between;
  flex-shrink: 0;
  position: relative;
  margin-top: 2.4vw;
  padding: 3.2vw 2.4vw 2.4vw 2.1333vw;
  background: white;
  border-top-left-radius: 3.2vw;
  border-top-right-radius: 3.2vw;
}
.board-item {
  display: flex;
  flex-direction: column;
  place-content: flex-start;
  flex-shrink: 0;
  position: relative;
  align-items: flex-start;
  width: 19.7333vw;
}
.board-img {
  width: 19.7333vw;
  height: 19.7333vw;
  position: relative;
  object-fit: contain;
  border-radius: 0.8vw;
}
.board-mask {
  position: absolute;
  top: 0vw;
  left: 0vw;
  width: 19.7333vw;
  height: 19.7333vw;
  border-radius: 0.8vw;
  background: rgba(0, 0, 0, 0.05);
}
.board-title {
  font-size: 3.2vw;
  white-space: nowrap;
  color: #333;
  font-weight: 400;
  text-align: left;
  margin-top: 1.0667vw;
  width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
}
.board-subtitle {
  font-size: 3.2vw;
  white-space: nowrap;
  color: rgb(118, 52, 246);
  font-weight: 400;
  text-align: left;
  margin-top: 0.8vw;
  width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
}
.card-link {
  display: flex;
  position: absolute;
  left: 0vw;
  top: 0vw;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.low-price-tips {
  font-size: 3.2vw;
  white-space: pre-wrap;
  color: rgb(253, 58, 88);
  font-weight: 400;
  text-align: left;
  position: absolute;
  right: 22.6667vw;
  bottom: 2.4vw;
}
.item-image {
  width: 18.6667vw;
  height: 18.6667vw;
  position: relative;
  object-fit: contain;
}
.card-content {
  .price {
    align-items: center;
  }
  .yen {
    font-size: 4.2667vw;
    white-space: pre-wrap;
    color: rgb(253, 58, 88);
    font-weight: 400;
    text-align: left;
    font-family: tmall-price-ExtraBold;
  }
  .number {
    font-size: 6.4vw;
    white-space: pre-wrap;
    color: rgb(253, 58, 88);
    font-weight: 400;
    text-align: left;
    font-family: tmall-price-ExtraBold;
  }
}
</style>
